<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>安捷能源</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/now1.css}">
    <link rel="stylesheet" th:href="@{/css/keyboard.css}">
    <link href="http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
    <style>
        .tabs {
            width: 100%;
            max-width: 1000px;
            margin: 10px auto;
        }

        .tabs>input {
            opacity: 0;
        }

        .tabs>label {
            cursor: pointer;
            background: #073598;
            color: #eee;
            border-radius: 20px 20px 20px 20px;
            padding: 1% 2%;
            float: left;
            margin-right: 2px;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
            text-align: center;
            z-index: 99;
        }

        .tabs>label:hover {
            background: #073598;
            color: #fff;
        }

        .tabs>input:checked+label {
            background: #056caa;
        ;
            color: #fff;
            margin-left: 0px;
        }

        .tabs input:nth-of-type(1):checked~.panels .panel:first-child,
        .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2) {
            opacity: 1;
            -webkit-transition: .3s;
        }

        .panels {
            float: left;
            /*clear: both;*/
            position: relative;
            width: 100%;
            border-radius: 0 10px 10px 10px;
            min-height: 650px;
            margin-top: -50px;
        }

        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            border-radius: 0 10px 10px 10px;
            box-sizing: border-box;
            height: 650px;
            margin-top: -50px;
            /*border:1px solid red;*/
            padding: 0px;
        }

        .gongkuang>div {
            width: 100%;
            margin-left: 0px;
            margin-top: 10px;
        }

        .gongkuang>div>div {
            width: 90%;
            margin-left: 0px;
        }

        .gongkuang>div>img {
            margin-right: 0px;
            margin-left: 0px;
        }
    </style>
</head>

<body>
<div class="top">
    <h2>安捷能源路由器</h2>
    <div id="timeNow">

    </div>
    <div class="titleButton">
        <img th:src="@{/img2/back.png}" alt="">
        <!--<a id="gomain" th:href="@{/main}" onclick="toMain()" style="position: absolute;top: 0;right: 100px;width: 50px;height: 50px;" > <img th:src="@{/img2/home.png}" alt="" style="height: 34px;width: 34px;"></a>-->
        <img th:src="@{/img2/home.png}" alt="" style="height: 34px;width: 34px;">
        <!--<a id="gomain" href="#" onclick="toMain()" style="position: absolute;top: 0;right: 100px;width: 50px;height: 50px;" > <img th:src="@{/img2/home.png}" alt="" style="height: 34px;width: 34px;"></a>-->

        <!--<img th:src="@{/img2/home.png}" alt="">-->
        <img th:src="@{/img2/close.png}" alt="">
    </div>

</div>
<div class="middle" style="width: 100%;">
    <div class="middle_m" style="width: 90%">
        <!--<div id="firstDiv" style="width: 100%;height: 50%;position: absolute;top: 0;;left:0px "></div>-->
        <!--<div id="eleChart" style="width:100%;height: 250px;"></div>-->
        <div id="hotChart" style="width: 100%;height: 250px;"></div>

    </div>
    <div class="middle_right" style="width: 90%;margin-top: 15px">
        <div class="middle_m_tittle">
            能源预测图
        </div>
        <!--<div id="hotChart" style="width: 100%;height: 250px;"></div>-->
        <div id="eleChart" style="width:100%;height: 250px;"></div>

    </div>
</div>
<div class="bottom">
    <div class="bottom_left" style="width: 65%" id="tupu">
        <div class="bottom_left_title">
            知识图谱图
        </div>
        <!--        知识图谱开始-->
        <div style="position: relative; width: 100%;height: 650px;" id="knowChart">
            <div id="loadingDiv" style="position: absolute;top:50%;left:50%">
                <img style="width: 30px;height: 30px;" th:src="@{img2/loadding.gif}" alt="">
            </div>
        </div>
        <!--        知识图谱结束-->
    </div>
    <div class="bottom_right" style="width: 35%;margin-left: 0px">
        <div class="bottom_right_top" style="width: 100%">
            <div class="bottom_right_top_title">
                策略建议
            </div>
            <div class="gongkuang">
            </div>
        </div>
        <div class="bottom_right_bottom">
            <div>
                <div class="bottom_right_bottom_title" style="float: left">
                    策略库
                </div>
                <div class="bottom_right_bottom_title" style="width: 200px;float:left">
                    写字楼工况模式
                </div>
            </div>
            <div class="bottom_computer">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <!--                <img src="img2/computer.png" alt="">-->
                <div style="color:#fff;float: right">......</div>
            </div>
        </div>

    </div>
</div>
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/time.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<!--<script th:src="@{/js/spin.js}"></script>-->
<script>
    $(function() {
        draw();
        drawEleChart();
        getNodeAndLine();
    })
    var eleChart = echarts.init(document.getElementById('eleChart')); //电量图
    var hotChart = echarts.init(document.getElementById('hotChart')); //能量图
    var mychart = echarts.init(document.getElementById("knowChart")); //知识图谱
    function drawEleChart() { //电量，冷热量折线图
        $.ajax({
            type: "GET",
            url: "/power/strategy/predict_data",
            dataType: "json",
            async: true,
            success: function(data) {
                if (eleChart != null && eleChart != "" && eleChart != undefined) {
                    eleChart.dispose();
                }
                if (hotChart != null && hotChart != "" && hotChart != undefined) {
                    hotChart.dispose();
                }
                console.log(data.electricity);
                console.log(data.power);
                var arrEle = data.electricity;
                var arrHot = data.power;
                var sumEle = 0;
                var sumHot = 0;
                for (var j = 0; j < arrHot.length; j++) {
                    sumHot = sumHot + Number(arrHot[j]); //计算总能量
                }
                for (var i = 0; i < arrEle.length; i++) {
                    sumEle = sumEle + Number(arrEle[i]); //计算总电量
                }
                option2.title.subtext = "明日能量:" + Number(sumHot).toFixed(0) + "kWh";
                hotChart = echarts.init(document.getElementById('hotChart'));
                option2.series[0].data = arrHot;
                hotChart.setOption(option2);
                option1.title.subtext = "明日电度:" + Number(sumEle).toFixed(0) + "kWh";
                eleChart = echarts.init(document.getElementById('eleChart'));
                option1.series[0].data = arrEle;
                eleChart.setOption(option1);
            }
        })
    }

    function getNodeAndLine() {
        $.ajax({
            type: "GET",
            url: "/power/relationship/getViewAtlas",
            dataType: "json",
            async: false,
            success: function(data) {
                console.log(1);
                console.log(data.node); //获取所有的节点
                console.log(data.edge); //获取所有的边
                var node = data.node;
                var edge = data.edge;
                var nodeLength = data.node.length; // 节点的长度
                var edgeLength = data.edge.length; // 边的长度
                console.log(nodeLength);
                console.log(edgeLength);
                var nodeObject = { //节点对象
                    "name": "设备",
                    desc: "8", //描述，对应节点的id
                    "value": [200, 80], //节点的坐标
                    symbolSize: [60, 80],
                    selected: true,
                    // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                    // symbol:'none'
                    symbol: 'circle',
                    itemStyle: {
                        color: '#fff'
                    }
                };
                line_direction_option.series[0].data = node.map(function(item, index) {
                    return {
                        name: item.deviceName, //设备名称
                        desc: item.deviceId.toString(), // 设备id
                        value: item.coordinate, //设备坐标
                        symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath, //设备图片
                        symbolSize: [60, 60], //节点的大小
                        selected: true,
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                })
                line_direction_option.series[1].data = edge.map(function(item) {
                    return {
                        name: "传递", //边标签上显示的文字
                        coords: item.line, //边的坐标
                        desc: item.desc, //边的描述，例如:3#10,3为起始节点id，10为终止节点id
                        effect: {
                            show: false,
                            trailLength: 0,
                            symbolSize: [30, 30],
                            symbol: 'none'
                            // symbol:'none'
                            // symbol:'image://img/sun.png'
                        },
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/power/gen",
                    dataType: "json",
                    async: true,
                    beforeSend: function() {
                        // $.blockUI();//请求之前打开
                        $.blockUI({
                            message: '<h1>请等待...</h1>'
                        });
                    },
                    success: function(data) {
                        $.unblockUI(); //返回关闭
                        var edgeHigh1 = data.path; //高亮边
                        console.log('edgeHigh1' + edgeHigh1)
                        var path2 = 'image://img/littlesun.png';
                        var rc = data.rc; //策略是否运行成功的标志符
                        if (rc == "0") { //运行成功
                            var nodeHigh = []; //保存高亮节点数组
                            var edgeHigh = []; //保存高亮边数组
                            console.log(data.gongkuang);
                            var nodeHigh1 = data.node;
                            var arr = data.gongkuang; //工况数组
                            //动态生成工况开始
                            var gongkuang1 = document.getElementsByClassName("gongkuang")[0];
                            gongkuang1.innerHTML = '';
                            for (var i = 0; i < arr.length; i++) { //动态表里工况数组，成功工况
                                var newdiv = document.createElement("div");
                                //     <!--                <div>-->
                                //     <!--                    <img src="img2/computer.png" alt="" >-->
                                //     <!--                    <span>工况6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蓄能</span>-->
                                //     <!--                    <div></div>-->
                                //     <!--                </div>-->
                                // <!--                <div>-->
                                var newimg = document.createElement("img");
                                newimg.setAttribute("src", "img2/computer.png");
                                newdiv.appendChild(newimg);
                                var newdiv1 = document.createElement("div");
                                var newspan = document.createElement("span");
                                newspan.innerHTML = arr[i];
                                newdiv.appendChild(newspan);
                                newdiv.appendChild(newdiv1);
                                var gongkuang = document.getElementsByClassName("gongkuang")[0];
                                gongkuang.appendChild(newdiv);
                                // console.log(arr[i]);
                            }
                            //遍历节点对象，将对象转为数组。
                            for (var index1 = 0; index1 < nodeHigh1.length; index1++) {
                                nodeHigh.push(nodeHigh1[index1]);
                            }
                            //遍历边对象，将对象转为数组。
                            for (var index2 = 0; index2 < edgeHigh1.length; index2++) {
                                edgeHigh.push(edgeHigh1[index2]);
                            }
                            console.log("data=" + nodeHigh);
                            console.log("data=" + edgeHigh);
                            console.log(typeof nodeHigh);
                            console.log(typeof edgeHigh);
                            console.log(data.rc);
                            console.log(typeof data.rc);
                            for (var i = 0; i < nodeLength; i++) { //节点高亮
                                for (var j = 0; j < nodeHigh.length; j++) {
                                    console.log(node[i].deviceId);
                                    if (nodeHigh[j] == node[i].deviceId) {
                                        //如果id相同则通过id查询高亮图片，高亮。
                                        $.ajax({
                                            type: "GET",
                                            url: "/power/device/getHighlightPic/" + node[i].deviceId,
                                            dataType: "json",
                                            async: false,
                                            success: function(data) {
                                                line_direction_option.series[0].data[i].symbol = "image://" + data.highlight;
                                            }
                                        })
                                    }
                                }
                            }
                            for (var i = 0; i < edgeLength; i++) { //边高亮
                                for (var j = 0; j < edgeHigh.length; j++) {
                                    /*console.log(node[i].deviceId);*/
                                    if (edgeHigh[j] == edge[i].desc) { //如果关系名称相同则边高亮。
                                        // line_direction_option.series[1].data[i].effect.symbol="image://"+edge[i].icon;
                                        line_direction_option.series[1].data[i].effect.symbol = "image://" + edge[i].energyPic;

                                    }
                                }
                            }
                            $("#loadingDiv").parent().remove();
                            mychart.setOption(line_direction_option);

                        } else if (rc == "1") {
                            mychart.setOption(line_direction_option);
                            layer.alert('找不到策略,请检查数据输入是否正常', {

                                icon: 5,

                                title: "提示"

                            });
                            return false;
                        }

                    },
                    error: function(data) {
                        $.unblockUI(); //返回关闭
                        mychart.setOption(line_direction_option);
                        layer.alert('策略生成异常，请稍后再试！', {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
            },
        })
    }
    //知识图谱对象配置
    var line_direction_option = {
        title: { //标题
            // text: '夏季能源知识图谱',
            left: '-5',
            top: '10px',
            textStyle: {
                color: '#ffffff',
                fontFamily: '微软雅黑',
                fontWeight: 'lighter',
                fontSize: 18
            },
        },
        // 提示框的配置
        tooltip: {
            trigger: 'item',
            formatter: "名称:{b0}" + "<br>" +
                "坐标值:" + "[" + "{c0}" + "]",
        },

        xAxis: { //X轴的设置
            type: 'value',
            boundaryGap: false,
            show: false
        },
        yAxis: { //Y轴的设置
            type: 'value',
            show: false,
            inverse: true,
        },
        series: [{ //节点
            type: 'graph',
            layout: 'none',
            // silent: true,          //不响应鼠标事件
            coordinateSystem: 'cartesian2d',
            symbolSize: 20,
            showEffectOn: 'render',
            zlevel: 2,
            rippleEffect: {
                period: 3, //波纹秒数
                brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                scale: 10 //波纹范围
            },
            hoverAnimation: true,

            label: {
                normal: {
                    show: true,
                    position: 'bottom', //设置label显示的位置
                    // formatter: '{c}',//设置label读取的值为value
                    textStyle: {
                        fontSize: '18'
                    },
                }
            },
            data: []
        },

            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 18,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',

                        width: 3,
                        opacity: 0.5,
                        curveness: 0,

                    }
                },
                effect: {
                    show: true,
                    // smooth: false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
        ],

    }
    var option1 = {

        title: {
            text: '小时电度预测',
            subtext: "明日电量",
            subtextStyle: {
                color: "#fff",
                fontSize: 20
            },
            x: '80',
            padding: [0, 0, 0, 50],
            textStyle: {
                color: "#fff",
                fontSize: '16',
                fontWeight: '500'
            },
        },
        animation: false,
        // animationDuration:15000,

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: '30',
            data: ['电度'],
            textStyle: {
                //标题颜色
                color: "#fff"
            },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '26%', // 等价于 y: '16%'
            left: '7%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },

        // //工具框，可以选择
        // toolbox: {
        //     feature: {
        //         saveAsImage: {} //下载工具
        //     }
        // },

        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: '#fff'
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: 0, // 旋转角度
                interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
            ]
        },

        yAxis: {
            name: 'KWh',
            type: 'value',
            // min:0, // 设置y轴刻度的最小值
            // max:1800,  // 设置y轴刻度的最大值
            splitNumber: 9, // 设置y轴刻度间隔个数
            axisLine: {
                lineStyle: {
                    // 设置y轴颜色
                    color: '#fff'
                }
            },
        },

        series: [{
            name: '电度',
            data: [],
            // [820, 932, 301, 1434, 1290, 1330, 1320,
            // 810,900,700,1000,1200,1700,
            // 1200,900,1300,1400,1500,800,950,
            // 890, 1000, 301,500 ],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
            itemStyle: {
                normal: {
                    // 拐点上显示数值
                    label: {
                        show: true
                    },
                    borderColor: 'red', // 拐点边框颜色
                    lineStyle: {
                        width: 3, // 设置线宽
                        type: 'solid' //'dotted'虚线 'solid'实线
                    }
                }
            }
        },

        ],

        color: ['#eeb151']
    };
    var option2 = {

        title: {
            text: '小时能量预测',
            subtext: "明日能量",
            subtextStyle: {
                color: "#fff",
                fontSize: 20
            },
            x: '80',
            padding: [0, 0, 0, 50],
            textStyle: {
                color: "#fff",
                fontSize: '16',
                fontWeight: '500'
            },
        },
        animation: false,
        // animationDuration:15000,

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: '30',
            data: ['能量'],
            textStyle: {
                //标题颜色
                color: "#fff"
            },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '26%', // 等价于 y: '16%'
            left: '7%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },

        // //工具框，可以选择
        // toolbox: {
        //     feature: {
        //         saveAsImage: {} //下载工具
        //     }
        // },

        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: '#fff'
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: 0, // 旋转角度
                interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
            ]
        },

        yAxis: {
            name: 'KWh',
            type: 'value',
            // min:0, // 设置y轴刻度的最小值
            // max:1800,  // 设置y轴刻度的最大值
            splitNumber: 9, // 设置y轴刻度间隔个数
            axisLine: {
                lineStyle: {
                    // 设置y轴颜色
                    color: '#fff'
                }
            },
        },

        series: [{
            name: '能量',
            data: [],
            // [820, 932, 301, 1434, 1290, 1330, 1320,
            // 810,900,700,1000,1200,1700,
            // 1200,900,1300,1400,1500,800,950,
            // 890, 1000, 301,500 ],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
            itemStyle: {
                normal: {
                    // 拐点上显示数值
                    label: {
                        show: true
                    },
                    borderColor: 'red', // 拐点边框颜色
                    lineStyle: {
                        width: 3, // 设置线宽
                        type: 'solid' //'dotted'虚线 'solid'实线
                    }
                }
            }
        },

        ],

        color: ['#ea7a80']
    };
    // var option2 = {
    //
    //     title: {
    //         text: '小时能量预测',
    //         subtext:"明日电量",
    //         subtextStyle:{
    //             color:"#fff",
    //             fontSize:20
    //         },
    //         x: '50' ,
    //         padding:[0,0,0,50],
    //         textStyle: {
    //             color: "#fff",
    //             fontSize:'16',
    //             fontWeight:'500'
    //         },
    //     },
    //     animation:false,
    //
    //
    //     legend: {
    //         // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
    //         orient: 'horizontal',
    //         // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
    //         x: 'center',
    //         // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    //         y: '30',
    //         data: ['能量'],
    //         textStyle: {
    //             //标题颜色
    //             color: "#fff"
    //         },
    //     },
    //
    //     //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
    //     grid: {
    //         top: '26%',   // 等价于 y: '16%'
    //         left: '7%',
    //         right: '8%',
    //         bottom: '3%',
    //         containLabel: true
    //     },
    //
    //     // 提示框
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //
    //     // //工具框，可以选择
    //     // toolbox: {
    //     //     feature: {
    //     //         saveAsImage: {} //下载工具
    //     //     }
    //     // },
    //
    //     xAxis: {
    //         type: 'category',
    //         axisLine: {
    //             lineStyle: {
    //                 // 设置x轴颜色
    //                 color: '#fff'
    //             }
    //         },
    //         // 设置X轴数据旋转倾斜
    //         axisLabel: {
    //             rotate: 0, // 旋转角度
    //             interval: 1  //设置X轴数据间隔几个显示一个，为0表示都显示
    //         },
    //         // boundaryGap值为false的时候，折线第一个点在y轴上
    //         boundaryGap: false,
    //         data:["00:00","01:00","02:00","03:00","04:00","05:00",
    //             "06:00","07:00","08:00","09:00","10:00","11:00",
    //             "12:00","13:00","14:00","15:00","16:00","17:00",
    //             "18:00","19:00","20:00","21:00","22:00","23:00"]
    //     },
    //
    //     yAxis: {
    //         name: 'KWh',
    //         type: 'value',
    //         // min:0, // 设置y轴刻度的最小值
    //         // max:1800,  // 设置y轴刻度的最大值
    //         splitNumber:9,  // 设置y轴刻度间隔个数
    //         axisLine: {
    //             lineStyle: {
    //                 // 设置y轴颜色
    //                 color: '#fff'
    //             }
    //         },
    //     },
    //
    //     series: [
    //         {
    //             name: '能量',
    //             data:[],
    //             // [620, 732, 941, 834, 1690, 1030, 920,
    //             //     620, 732, 941, 834, 1690, 1030, 920,
    //             //
    //             //     620, 732, 941, 834, 1690, 1030, 920,
    //             //     620, 732, 941],
    //             type: 'line',
    //             symbol: 'none',
    //             smooth: 0.5,
    //             // 设置折线上圆点大小
    //             symbolSize:8,
    //             // itemStyle:{
    //             //     normal:{
    //             //         // 拐点上显示数值
    //             //         label : {
    //             //             show: true
    //             //         },
    //             //         borderColor:'red',  // 拐点边框颜色
    //             //         lineStyle:{
    //             //             width:5,  // 设置线宽
    //             //             type:'solid'  //'dotted'虚线 'solid'实线
    //             //         }
    //             //     }
    //             // }
    //         },
    //     ],
    //
    //     color: ['#ea7a80']
    // };
    window.addEventListener("resize", function() {
        mychart.resize();
        eleChart.resize();
        hotChart.resize();
    });
</script>
</body>

</html>